<template>
	<el-dialog v-model="props.isShow" width="26%" close-icon="CloseBold" @close="close">
		<template #header>
			<div v-if="step == 2">
				<el-icon size="18px" @click="step = 1"><Back /></el-icon>
			</div>
		</template>
		<div v-if="step == 1">
			<div class="text-24px font-bold">
				关联验证器
			</div>
			<p class="text-18px text-[#000] mt-10px">用验证器App扫描这个二维码</p>
			<div class="flex flex-col items-center mt-20px">
				<div>
					<img src="/person/wechat-code.svg" class="w-170px h-170px"/>
				</div>
				<div class="mt-10px flex items-center">
					<p class="text-18px mr-10px">5Q4PB4W4Y5WKCGCG</p>
					<img src="/transaction/spot/copy.svg"
					class="w-14px h-14px"/>
				</div>
				<div class="mt-10px text-14px text-#B5B5B5">
					如果您无法扫描这个二维码，请在App中手动输入这串字符
				</div>
			</div>
			<div class="mt-60px">
				<el-button color="#114CEE" style="font-size:18px;width:100%;height:50px;" @click="step = 2"> 下一步
				</el-button>
			</div>
		</div>
		<div v-if="step == 2" class="pb-40px">
			<div>
				<p class="font-bold text-[#000] text-24px">验证身份验证器</p>
				<p class="text-18px text-[#000] mt-10px">请输入验证器App生成的6位验证码</p>
			</div>
			<div class="mt-20px">
				<p class="text-#86909C">身份验证器APP</p>
				<div class="mt-10px flex justify-between items-center relative">
					<div class="w-100%">
						<el-input placeholder=""  />
					</div>
					<div class="h-50px absolute flex items-center justify-center right-10px
					text-18px text-#114CEE">
						<p >粘贴</p>
					</div>
				</div>
			</div>
			<div class="mt-30px">
				<el-button color="#114CEE" style="font-size:18px;width:100%;height:50px;" @click="confirm"> 提交
				</el-button>
			</div>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'

interface IProps {
	isShow: boolean
}
const props = defineProps<IProps>();

const emits = defineEmits(['close', 'confirm']);

const phoneInput = ref<string>('');

const step = ref<1 | 2>(1);

const close = () => {
	emits('close', false)
}

const confirm = () => {
	emits('confirm')
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item--label-top .el-form-item__label:before {
	display: none;
}

::v-deep .el-input__wrapper {
	height: 50px;
}

::v-deep .el-input__inner {
	font-size: 18px;
}

</style>
